<template>
  <div class="select-wrapper">
    <div class="left">
      <selectHeader :info="selectData.category"></selectHeader>
      <selectItem :itemData="selectData.data"></selectItem>
    </div>
    <div class="right">
      <selectHot :hotDate="selectTopData.data"></selectHot>
    </div>
  </div>
</template>

<script>
  import selectHeader from '../../components/movie/selectHeader'
  import selectItem from '../../components/movie/selectItem'
  import selectHot from '../../components/movie/selectHot'
    export default {
      props: {
        selectData: Object,
        selectTopData: Object
      },
      components: {
        selectHeader,
        selectItem,
        selectHot
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .select-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .left{
      width: 880px;
    }
    .right{
      width: 260px;
    }
  }
</style>
